
<template>
<div class="game">
  <div class="title">热门游戏</div>
  <!--<ul>
    <li v-for="item in games" :key="item.id">{{ item.name }}</li>
  </ul>-->

  <!--不固定结构，在父组件中呈现：-->
  <slot :games="games"></slot>
</div>
</template>
<script setup lang="ts">
const games = reactive([
  {id:'1',name:'英雄联盟',},
  {id:'2',name:'王者农药',},
  {id:'3',name:'Dota',},
])
</script>

<style scoped>
.game{
  width: 200px;
  height: 200px;
  background: skyblue;
  border-radius: 4px;
  box-shadow: 0 0 10px;

  margin: 10px 20px;
}

.title {
  background: orange;
}
</style>
